<template>
  <a-modal
    v-model:open="show"
    width="40%"
    centered
    :title="title"
    :footer="null"
    @cancel="handleCloseDialog"
  >
    <a-form
      ref="formRef"
      class="form"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="contactUserName" label="收件人" name="contactUserName">
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="输入收件人姓名"
          v-model:value="formState.contactUserName"
        />
      </a-form-item>
      <a-form-item ref="contactMobile" label="联系电话" name="contactMobile">
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="输入联系电话"
          v-model:value="formState.contactMobile"
        />
      </a-form-item>
      <a-form-item ref="cityStr" label="退货地址" name="cityStr">
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="选择退货地址"
          @click="handleShowMap"
          v-model:value="formState.cityStr"
        />
      </a-form-item>
      <a-form-item ref="addressDetail" label="详细地址" name="addressDetail">
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="输入单元或门派号详细"
          v-model:value="formState.addressDetail"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
        <div class="btns center">
          <a-space>
            <a-button @click="handleCloseDialog">取消</a-button>
            <a-button type="primary" @click="handleSubmit">确定</a-button>
          </a-space>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal
    v-model:open="mapShow"
    width="40%"
    centered
    title="选择地址"
    :footer="null"
  >
    <baidu-map
      class="map"
      ak="njkiSrCHZkXEPY5DBMffRpx5KCES4CTN"
      v="3.0"
      type="API"
      :center="center"
      :scroll-wheel-zoom="true"
      :zoom="15"
      style="height: 400px; width: 100%;margin-top:30px"
      @ready="handler"
      @click="getLocation"
    >
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-marker :position="{ lng: center.lng, lat: center.lat }">
        <bm-label
          content=""
          :labelStyle="{ color: 'red', fontSize: '24px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
      <div
        style="
          display: flex;
          justify-content: center;
          margin: 0;
          position: absolute;
          top: 50px;
        "
      >
        <a-input v-model:value="searchJingwei" placeholder="请输入你要选择的地址"  />
        <a-button type="primary" @click="getBaiduMapPoint">搜索</a-button>
      </div>
    </baidu-map>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { editOrSaveUserAddress } from "@/api/config";
import {
  BaiduMap,
  BmAutoComplete,
  BmGeolocation,
  BmMarker,
  BmLabel,
} from "vue-baidu-map-3x";
const props = defineProps(["show", "title", "formState"]);
const { show, title, formState } = props;
const mapShow = ref(false);
const formRef = ref();
const center = ref({
  lng: 104.071533,
  lat: 30.604682,
});
const BMaps = ref(null);
const maps = ref(null);
function handler({ BMap, map }) {
  BMaps.value = BMap;
  maps.value = map;
}
const options = ref([]);
const searchJingwei = ref("");
const getLocation = (e) => {
  center.value.lat = e.point.lat;
  center.value.lng = e.point.lng;
  let myGeo = new BMaps.value.Geocoder();
  //逆地址解析
  myGeo.getLocation(e.point, function (point) {
    console.log(point);
    const addressComponents = point.addressComponents;
    formState.cityStr =
      addressComponents.province +
      "-" +
      addressComponents.city +
      "-" +
      addressComponents.district;
    formState.addressDetail = point.content.poi_desc;
    formState.province = addressComponents.province;
    formState.city = addressComponents.city;
    formState.region = addressComponents.district;
    mapShow.value = false;
  });
};
function getBaiduMapPoint() {
  let myGeo = new BMaps.value.Geocoder();
  //逆地址解析
  myGeo.getPoint(searchJingwei.value, function (point) {
    if (point) {
      maps.value.centerAndZoom(point, 15);
      center.value.lat = point.lat;
      center.value.lng = point.lng;
    }
  });
}
const labelCol = {
  span: 3,
};
const wrapperCol = {
  span: 18,
};
function handleShowMap() {
  mapShow.value = true;
}
const emits = defineEmits(["handleSave", "handleCancel"]);
const handleSubmit = async () => {
  const result = await editOrSaveUserAddress(formState);
  if (result.code == 200) {
    message.info(title+"成功");
    emits("handleSave", true);
  }
};
const handleCloseDialog = () => {
  emits("handleCancel", false);
};
</script>
<style scoped lang="less">
.form {
  margin-top: 24px;
}
.content {
  background: #f4f6f8;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 200px;
  margin-bottom: 40px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
